<template>
  <div class="top" id="chartRef"></div>
</template>

<script setup>
import * as echarts from "echarts";

let props = defineProps({
  partition: {
    type: Array,
    default: []
  },
  fid: {
    type: String,
    default: '0'
  },
})
let timer = null;
let dataIdx = 0;
const fondColor = (partition) => { // 白红交替，颜色自定义，如果只要2种颜色可以删除替换掉红色或者白色
  let color = [
    '#FFC312', '#C4E538', '#F79F1F',
    '#1289A7', '#D980FA', '#B53471',
    '#EE5A24', '#0652DD', '#9980FA',
    '#EA2027', '#1B1464', '#5758BB'
  ]
  let len = partition.length;
  let colorArr = []
  for (let j = 0; j < len; j++) {
    if (j > color.length - 1) {
      j = 0;
      len -= color.length
    }
    colorArr.push(color[j])
  }
  for (let i = 0; i < partition.length; i++) {
    if (partition[i].bad_flag > 0) {
      if (dataIdx === 1) {
        colorArr[i] = '#ffffff'
      } else if (dataIdx === 2) {
        colorArr[i] = '#cc0000'
      }
    }
  }
  switch (dataIdx) {
    case 0:
      dataIdx = 1;
      break;
    case 1:
      dataIdx = 2;
      break;
    default:
      dataIdx = 0
  }
  return colorArr;
}

const echartsInitBigPie = (myChart, partition, wattHourMeter) => {
  let text = {
    text: "智慧分区",
    left: 'center',
    top: '32%',
    textStyle: {
      fontSize: 16,
      textAlign: 'center',
      width: 30,
      height: 25,
      color: '#fff',
      fontWeight: '900'
    }
  }
  myChart.on('mouseover', function () {
    let r = wattHourMeter.filter((i) => {
      //console.log(i.fid, params.data.id);

      return i.fid == params.data.id
    })
    // text.text = (params.data.power / 1000).toFixed(3) + " kwh"
    if (r.length) {
      let power = 0
      r.map((i) => power += i.power)
      text.text = power + " kwh"
      text.textStyle.fontSize = 12
    }

  });
  myChart.on('mouseout', function (params) {
    text.text = "智慧分区"
    text.textStyle.fontSize = 16
  });

  //timer = setInterval(() => {
  myChart.setOption({
    title: text,
    animation: false,
    tooltip: {
      trigger: 'item',
      position: function (point, params, dom, rect, size) {
        // 鼠标坐标和提示框位置的参考坐标系是：以外层div的左上角那一点为原点，x轴向右，y轴向下
        // 提示框位置
        let x = 0; // x坐标位置
        let y = 0; // y坐标位置

        // 当前鼠标位置
        let pointX = point[0];
        let pointY = point[1];

        // 外层div大小
        // var viewWidth = size.viewSize[0];
        // var viewHeight = size.viewSize[1];

        // 提示框大小
        let boxWidth = size.contentSize[0];
        let boxHeight = size.contentSize[1];

        // boxWidth > pointX 说明鼠标左边放不下提示框
        if (boxWidth > pointX) {
          x = 5;
        } else { // 左边放的下
          x = pointX - boxWidth;
        }

        // boxHeight > pointY 说明鼠标上边放不下提示框
        if (boxHeight > pointY) {
          y = 5;
        } else { // 上边放得下
          y = pointY - boxHeight;
        }

        return [x, y];
      }
    },
    legend: {
      top: '67%',
      left: '26',
      itemWidth: 10, // 图例标记的图形宽度
      itemHeight: 10,
      icon: "circle",
      itemGap: 20,
      textStyle: {
        color: '#fff',
        fontSize: '12'
      },
      padding: [
        0,  // 上
        10, // 右
        30,  // 下
        0, // 左
      ]
    },
    series: [
      {
        color: fondColor(partition),
        name: '',
        type: 'pie',
        center: ["50%", "35%"],
        radius: ['30%', '50%'],
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: 'center'
        },
        labelLine: {
          show: false
        },
        itemStyle: {

          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'


        },
        data: partition
      }
    ]
  });
  /// }, 200)
}

let myChart = {};
let bigPie = ref([]);
let { proxy } = getCurrentInstance()

onMounted(() => {
  //const { wattHourMeter } = useModel('projectData');
  if (timer != null) {
    clearInterval(timer)
  }
  // let myChart = echarts.getInstanceByDom(chartRef.current);
  // if (!myChart) // 如果不存在则创建
  // {
  myChart = echarts.init(document.getElementById("chartRef"));
  //}
  let params = new FormData();
  params.append('fid', props.fid || 49);

  let wattHourMeter = '';
  $axios.post('/wattHourMeter/data', params).then(res => {
    wattHourMeter = res.data.data;
    proxy.$mitt.on('bigPieFn', (res) => {
      bigPie.value = res;
      echartsInitBigPie(myChart, bigPie.value, wattHourMeter)
    })

  }).catch(err => { })

})
watch(
  () => props.fid,
  (newVal, oldVal) => {
    let params = new FormData();
    params.append('fid', props.fid || 49);

    let wattHourMeter = '';
    $axios.post('/wattHourMeter/data', params).then(res => {
      wattHourMeter = res.data.data;
      proxy.$mitt.on('bigPieFn', (res) => {
        bigPie.value = res;
        echartsInitBigPie(myChart, bigPie.value, wattHourMeter)
      })

    }).catch(err => { })

    //   if (timer != null) {
    //   clearInterval(timer)
    // }
    // if (myChart[props.id] != null && myChart[props.id] != "" && myChart[props.id] != undefined) {
    //   myChart[props.id].dispose();//销毁
    // }
    // myChart[props.id] = echarts.init(document.getElementById(props.id));
    // myChart[props.id].setOption(LineBarChart())
  }
)

</script>

<style lang="scss" scoped>
.treeBox {
  width: 180px;
  border-right: solid 1px #fff;
  margin-right: 13px;
  background-color: #212121;
}

#chartRef {
  width: 100%;
  height: 300px;
}
</style>